<template>
	<view :class="[primarySize()]">
		<view class="page-foot ptb10 bg-white">
			<view class="plr30">
				<button @click="bindSave" hover-class="none" class="btn1">确定
				</button>
			</view>
		</view>
		<view class="container plr30 pt40 bg-white">
			<view class="flex-box mb40">
				<view class="flex-grow-1 fs34 col10 fwb lh34">全部地址（{{addressList.length}}）</view>
				<view class="lh42 col2 fs30 " @click="bindAddLocation">+添加新地址</view>
			</view>
			<view class="plr30">
				<template v-for="(address,index) in addressList">
					<view class="picker_item flex-box" style="padding-bottom: 20rpx;" @click="changetab(index)">
						<image :src="address.checked?iconPath('choose_sc.png'):iconPath('choose_uc.png')"
							mode="aspectFill" class="ico36"></image>
						<view class="flex-grow-1 pl30">
							<view class="fs32 col1 lh44 m-ellipsis">{{address.address_name}}</view>
							<view class="m-ellipsis-l2 mt20 fs30 col9 lh42">{{address.address}}</view>
						</view>
						<view class="fs30 col8 pl70" @click.stop="bindDel(address)">删除</view>
					</view>
				</template>

			</view>

			<u-popup :show="pop" mode="center" :safeAreaInsetBottom="false" @close="togglePop" bgColor="transparent">
				<view class="pop2">
					<view class="pt20 pr30 pr z2" @click="closePop">
						<image class="close_img2" src="@/static/public/pop_close.png" mode="aspectFill" />
					</view>
					<view class="border ptb50">
						<view class="flex-grow-1 tc fs40 col3 fwb lh56 mb40">提示</view>
						<view class="flex-grow-1 tc fs32 col6 lh45">此地址若有关联使用，则无法删除</view>
					</view>
					<view class="lh48 col4 flex-grow-1 tc ptb30" @click="bindDel">确定</view>
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				pop: false,
				addressList: [],
				chooseIndex: 0
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {

			this.fetchAddress();
		},
		methods: {
			togglePop(event) {
				this.chooseIndex = event.currentTarget.dataset.index;
				this.pop = !this.pop
			},
			closePop() {
				this.pop = false
			},
			//地址
			bindAddLocation: function() {
				uni.navigateTo({
					url: '/pages/company/working_place',
					events: {
						'locationAdd': location => {
							this.fetchAddress();
						}
					}
				});
			},
			bindDel: function() {
				let index = this.chooseIndex;
				let address = this.addressList[index];
				this.$core.post({
					url: '/xilujob.company_address/del',
					loading: true,
					data: {
						id: address.id
					},
					success: ret => {
						this.closePop();
						this.fetchAddress();
					}
				});
			},
			//地址
			fetchAddress() {
				let that = this;
				this.$core.get({
					url: '/xilujob.company_address/index',
					loading: false,
					data: {},
					success: ret => {
						that.addressList = ret.data;
					}
				});
			},
			changetab(index) {
			
				let address = this.addressList[index];
				this.getOpenerEventChannel().emit("chooseLocation", address);
				uni.navigateBack({})
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.btn_c {
		width: 690rpx;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		background: #4A9DE1;
		border-radius: 8rpx;
		margin: 0 auto 30rpx;
	}

	.lh34 {
		line-height: 34rpx;
	}

	.lh42 {
		line-height: 42rpx;
	}

	.col-blue {
		color: #4A9DE1;
	}

	.part {
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.4);
		background-color: #fff;
	}

	.check {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.lh45 {
		line-height: 45rpx;
	}

	.lh38 {
		line-height: 38rpx;
	}

	.lh40 {
		line-height: 40rpx;
	}

	.pop2 {
		width: 616rpx;
		border-radius: 20rpx;
		background: #fff;
	}


	.colo1 {
		color: #4A9DE1;
	}

	.border {
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: -30rpx;
	}

	.lh56 {
		line-height: 56rpx;
	}

	.lh45 {
		line-height: 45rpx;
	}


	.lh48 {
		line-height: 48rpx;
	}

	.close_img2 {
		width: 30rpx;
		height: 30rpx;
		display: block;
		margin-left: auto;
		margin-right: 0;
	}

	.pr {
		position: relative;
		z-index: 2;
	}

	.ptb50 {
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	.picker_item {
		border-top: 1px solid #EEEEEE;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
</style>